<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vue-router@4"></script> 
</head>
<body>
    <body>
        <div id="app">
          <router-link to="/">主页</router-link>
          <span @click="handleToRoute('about')">关于网站</span>
          <button @click="handleRemoveRoute()">删除路由</button>
          <router-view></router-view>
        </div>
      </body>
      <script>
        // 局部组件
        const Home = {
          template: '<h2>主页信息</h2>'
        }
        const About = {
          template: '<h2>关于网站信息</h2>'
        }
        const routes = [
          {
            path: '/',
            name: 'home',
            component: Home
          }
        ]
        // 创建路由管理器实例
        const router = VueRouter.createRouter({
          history: VueRouter.createWebHashHistory(),
          routes: routes
        })
        // 创建Vue应用实例
        const appObj = Vue.createApp({
          setup() {
            const handleAddRoute = () => { // 添加路由
              router.addRoute({ path: '/about', name: 'about', component: About })
            }
            Vue.onMounted(handleAddRoute) // 执行路由添加操作
            const handleToRoute = (path) => { // 跳转操作
              if (path === 'about') {
                console.log(router.getRoutes()) // 读取路由数组
                router.push('about')
              }
            }
            const handleRemoveRoute = () => { // 删除路由
              router.removeRoute('about')
            }
            return {
              handleAddRoute,
              handleToRoute,
              handleRemoveRoute
            }
          }
        })
        appObj.use(router)
        appObj.mount('#app')
      </script>
</body>
</html>